<template>
  <div>
    <el-table :data="list" style="width: 100%">
      <el-table-column type="index" width="50"> </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="mobile" label="电话"> </el-table-column>
      <el-table-column prop="time" label="日期"> </el-table-column>
      <el-table-column prop="city" label="风险地"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini">编辑</el-button>
          <el-button size="mini" type="danger" @click="remove(scope.$index)"
            >删除</el-button
          >
        </template>
      </el-table-column>
      <!-- 在插槽里 scope.row 是这一行数据 就是item
      scope.$index 是下标 就是index -->
    </el-table>
  </div>
</template>

<script>
export default {
  // props:{
  //   list:Array
  // },
  //接收成对象可以验证类型
  props: ["list"],
  data() {
    return {};
  },
  methods: {
    remove(index) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$emit("remove", index);
          //点击确定调用父组件的删除方法
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //调用父组件的删除
  },
  created() {},
  mounted() {},
  components: {},
  computed: {},
  watch: {},
};
</script>

<style lang="scss" scoped></style>
